<template>
    <div style="width: 600px;height: 100%">
        <div id="objContainer"></div>
        <div class="container">
            <!-- F2-1 身份信息内部左侧 开始 -->
            <div class="idPickerContainer">
                <div style="padding: 15px 10px 0 25px">
                    <span class="inpText" style="margin-right: 3px">身份证：</span>
                    <Input placeholder="请输入身份证"  :disabled="renewal" size="small" style="width:320px;"
                           v-model="roomCheckinData.idCard"></Input>
                </div>
                <div class="idPicker">

                    <div class="inputGroup">

                        <div>
                            <span class="inpText">姓&nbsp;&nbsp;&nbsp;名：</span>
                            <Input class="inp" :disabled="renewal" v-model="roomCheckinData.geustName" placeholder="请输入姓名"
                                   size="small"></Input>
                        </div>
                        <div>
                            <span class="inpText">性&nbsp;&nbsp;&nbsp;别：</span>
                            <Select class="inp"  :disabled="renewal" size="small"  v-model="roomCheckinData.geustGender">
                                <Option v-for="item in gender" :value="item.value" :key="item.value">
                                    {{ item.desc }}
                                </Option>
                            </Select>
                        </div>
                        <div>
                            <span class="inpText">出&nbsp;&nbsp;&nbsp;生：</span>
                            <Date-picker class="inp"  :disabled="renewal" :readonly="renewal"
                                        type="date" size="small" placement="bottom-start"
                                        placeholder="选择日期" v-model="roomCheckinData.geustBirthday"></Date-picker>
                        </div>
                        <div>
                            <span class="inpText">住&nbsp;&nbsp;&nbsp;址：</span>
                            <Input class="inp"  :disabled="renewal" placeholder="请输入住址" size="large" type="textarea" :rows="4"
                                   v-model="roomCheckinData.geustAddress"></Input>
                        </div>

                    </div>
                    <div class="avatar">
                        <img :src="this.roomCheckinData.idImage ? this.roomCheckinData.idImage : '/static/images/avatar.png'" alt="身份证照片">
                    </div>

                </div>


                <div class="idInp">
                    <div style="border-top: 2px dashed #aaa;padding-top: 10px;">
                        <span class="inpText" style="margin-left: 9px;margin-right: 4px">电&nbsp;&nbsp;&nbsp;话：</span>
                        <Input style="width:322px" class="inp"  :disabled="renewal" placeholder="请输入联系电话" size="small"
                               v-model="roomCheckinData.geustPhone"></Input>
                    </div>
                </div>

            </div>
            <!-- F2-1 身份信息内部左侧 结束 -->

        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        props:{
            renewal:{
                type:Boolean,
                default: false,
            },
        },
        data() {
            return {
                roomCheckinData: {
                    geustName: "",
                    geustGender:'',
                    geustBirthday:'',
                    geustPhone: "",
                    geustAddress: "",
                    idImage: "",
                    idCard: "",
                },
                gender: [
                    {
                        desc: '男',
                        value: '男',
                    },
                    {
                        desc: '女',
                        value: '女'
                    }
                ],
                g_iPort: 1001,//端口号；USB = 1001 ~ 1016 ，COM端口 = 1~16
            }
        },
        mounted() {
            window.activeXListener = this;
            this.initControl()

        },
        destroyed(){
            this.roomCheckinData={}
        },
        beforeDestroy(){
            this.hxgc_CloseReader()
        },
        methods: {
            // 初始化控件
            initControl() {
                let obj = document.createElement("object");
                obj.setAttribute("id", "objActiveX");
                obj.setAttribute("classid", "clsid:A66F5373-0A8A-4C42-814B-38A87B331D40");
                obj.setAttribute("width", "0");
                obj.setAttribute("height", "0");

                let objContainer = document.getElementById("objContainer");
                objContainer.appendChild(obj);

                let scriptStr = document.createElement("SCRIPT");
                scriptStr.setAttribute("FOR", "objActiveX");
                scriptStr.event = "onMsgCallBack(param)"
                scriptStr.appendChild(document.createTextNode("activeXListener.wakeUp(param)"));
                objContainer.appendChild(scriptStr)

                this.hxgc_OpenReader()
            },
            // 打开设备
            hxgc_OpenReader() {
                var iResult = 0;
                iResult = objActiveX.hxgc_OpenReader(this.g_iPort);//打开设备
                if (iResult == 0) {
                    var strSAMID = objActiveX.hxgc_GetSamIdToStr(this.g_iPort);//获取SAMID
                    console.log("打开设备成功.\r\nSAMID = " + strSAMID + ".")
                    // document.getElementById("text_result").value = "打开设备成功.\r\nSAMID = " + strSAMID + ".";
                } else {
                    this.$Notice.error({
                        title:"打开设备失败！"
                    })
                }
            },
            // 读取身份证信息
            hxgc_ReadIDCard() {
                console.log("读取身份证信息")
                // 清空数据

                var iResult = 0;
                var strPhotoBase64 = "";
                var strCardSign = "";

                iResult = objActiveX.hxgc_ReadIDCard(this.g_iPort);//读二代证

                if (iResult == 0) {
                    //身份证通用数据
                    this.roomCheckinData = {
                        geustName: objActiveX.hxgc_GetName(),
                        geustGender: objActiveX.hxgc_GetSex(),
                        geustBirthday: objActiveX.hxgc_GetBirthDate(),
                        idCard: objActiveX.hxgc_GetIDCode()
                    }

                    //获取证件标识
                    strCardSign = objActiveX.hxgc_GetCardSign();
                    //判断是否为外国人身份证
                    if (strCardSign != "I") {
                        //获得普通居民身份证专有数据
                        console.log("读居民身份证信息成功")
                        this.roomCheckinData.geustAddress = objActiveX.hxgc_GetAddress();
                    } else {
                        //获得外国人身份证专有数据
                        console.log("读外国人身份证信息成功");
                    }

                    //获得照片JPG的BASE64编码数据
                    strPhotoBase64 = objActiveX.hxgc_SavePhAsJpgBase64();
                    this.roomCheckinData.idImage = "data:image/jpeg;base64," + strPhotoBase64;

                } else {
                    this.$Notice.error({
                        title:"读取身份证信息失败"
                    })
                }
                this.$emit("getPersonInfo",this.roomCheckinData)
            },
            // 关闭设备
            hxgc_CloseReader() {
                console.log("关闭设备")
                var iResult = 0;
                iResult = objActiveX.hxgc_CloseReader(this.g_iPort);
                if (iResult == 0) {
                    console.log("关闭设备成功")
                } else {
                    console.log("关闭设备失败，错误代码：" + iResult + ".");
                }
            },
            // 信息回调
            onMsgCallBack(param) {
                console.log("111111111111:", param)
            },
            wakeUp(param) {
                console.log("22222222222:", param)
            }
        }
    }
</script>

<style scoped lang="less">
    .container {
        user-select: none;
        display: flex;
        padding: 10px;
        background-color: #FFFFFF;
        .idPicker {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 416px;
            padding: 10px 10px 0 10px;
            .avatar {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 140px;
                height: 198px;
                border: 2px solid #EBECF0;
                border-radius: 8px;
            }
        }

        .idPickerContainer {
            border: 2px solid #EBECF0;
            border-radius: 8px;
            .idInp {
                padding: 0 16px 10px 16px;
                .inpText {
                    margin-left: 5px;
                }
            }
        }
        .inputGroup {
            display: flex;
            flex-direction: column;
            div {
                margin: 4px;
            }
            .inpText {
                margin-left: 5px;
            }
            .inp {
                width: 160px;
            }
        }
    }
</style>
